<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择供应商</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_nkr942sxu7.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="table_box">
            <div class="tab_cont" ref="tablebox">
                <el-table :data="clmxList" @row-click="rowclick" ref="multipleTable" @selection-change="selectionchange"
                    height="100%" border :select-on-indeterminate="isSingle == 1 ? false : true" @select="select"
                    @select-all="selectall" style="width: 100%">
                    <el-table-column type="selection" width="50" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" align="center" show-overflow-tooltip label="单位名称" min-width="130">
                    </el-table-column>

                    <el-table-column prop="principalName" align="center" show-overflow-tooltip label="负责人"
                        min-width="100"></el-table-column>


                    <el-table-column prop="principalPhone" align="center" show-overflow-tooltip label="负责人电话"
                        width="150">
                    </el-table-column>

                    <el-table-column prop="linkName" align="center" show-overflow-tooltip label="联系人" width="100">
                    </el-table-column>
                    <el-table-column prop="linkPhone" align="center" show-overflow-tooltip label="联系人电话"
                        min-width="150"></el-table-column>
                </el-table>
            </div>
            <div ref="paginations">
                <p style="color: #5574d7;font-size: 14px;line-height: 20px;">如果列表没有所需的建设单位，请至“基础信息” > “往来单位”中添加所需建设单位
                </p>
                <div class="pagination_box">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button class="cancelClass" @click="cancel">取消</el-button>
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    isSingle: '',
                    companyId: '',
                    pagesize: 20,
                    pageindex: 1,
                    totals: 0,
                    clmxList: [],
                    selected: [],
                    selectArr: [],
                    types: 1
                };
            },
            methods: {
                selectall() {
                    if (this.isSingle == 1) {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                select(selection, row) {
                    if (this.isSingle == 1) {
                        if (selection.length > 1) {
                            var del_row = selection.shift()
                            for (var i = 0; i < this.clmxList.length; i++) {
                                if (del_row.typeid == this.clmxList[i].typeid) {
                                    this.$refs.multipleTable.toggleRowSelection(this.clmxList[i], false);
                                }
                            }
                        }
                    }
                },
                // 取消
                cancel() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                // 提交
                confirms() {
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var data = JSON.stringify(this.selected);
                    parent.$('#publicValue').val(data);
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }, 100);
                },
                // 每页显示条数切换
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.pageindex = 1;
                    this.getClmxListData()
                },
                // 页数切换
                handleCurrentChange(val) {
                    this.pageindex = val;
                    this.getClmxListData()
                },
                // 点击某一行选择
                rowclick(row, column, event) {
                    if (this.isSingle == 1) {
                        this.$refs.multipleTable.clearSelection();
                    }
                    if (row) {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    }
                },
                selectionchange(val) {
                    this.selected = val;
                },
                // 获取材料列表
                getClmxListData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetPartnerList',
                        data: JSON.stringify({
                            companyId: that.companyId,
                            page: that.pageindex,
                            pageSize: that.pagesize,
                            typeId: that.types
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            // if (that.selectArr.length > 0) {
                            //     for (var j = 0; j < that.selectArr.length; j++) {
                            //         for (var i = 0; i < res.data.length; i++) {
                            //             if (res.data[i].materialId == that.selectArr[j].materialId && res.data[i].specificationId == that.selectArr[j].specificationId) {
                            //                 res.data.splice(i, 1)
                            //             }
                            //         }
                            //     }
                            // }
                            that.clmxList = res.data
                            that.totals = res.total
                        }
                    });
                },
            },
            mounted() {
                this.showApp = true;
                var that = this;
                setTimeout(function () {
                    var aa = that.$refs.paginations.offsetHeight;
                    var ss = 'calc(100% - ' + aa + 'px)';
                    that.$refs.tablebox.style.height = ss;
                }, 2);
                this.companyId = getQuerys('companyId')
                this.isSingle = getQuerys('isSingle')
                if (getQuerys('types')) {
                    this.types = 3
                }
                if (getQuerys('selectArr')) {
                    this.selectArr = JSON.parse(decodeURIComponent(getQuerys('selectArr')))
                }
                this.getClmxListData()
                // getQuerys()
            }
        });
    </script>
</body>
<style>
    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

    .but_box .el-button {
        width: 120px;
        height: 32px;
        background: #5574d7;
        border-radius: 5px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .but_box .el-button--primary:focus,
    .but_box .el-button--primary:hover {
        background: rgba(85, 116, 215, 0.6);
        border-color: rgba(85, 116, 215, 0.6);
        color: #fff;
    }

    .but_box .el-button--primary.is-active,
    .but_box .el-button--primary:active {
        background: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        color: #fff;
    }

    .but_box .cancelClass {
        background: transparent;
        border: 1px solid #bbbbc5;
        color: #333333;
    }

    .but_box .cancelClass:focus,
    .but_box .cancelClass:hover {
        color: rgba(85, 116, 215, 1);
        border-color: rgba(85, 116, 215, 0.1);
        background-color: #ecf5ff;
    }

    .but_box .cancelClass:active {
        color: rgba(85, 116, 215, 0.8);
        border-color: rgba(85, 116, 215, 0.8);
        outline: none;
    }

    .table_box {
        padding: 3.09vh 3.67vw;
        height: calc(100% - 70px);
    }

    .el-table th {
        background: #f8f8f8;
    }

    .el-table td,
    .el-table th {
        color: #333333;
        padding: 0;
        height: 32px;
    }

    .el-tooltip__popper.is-dark {
        background: #ffffff;
        color: #333333;
        box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
    }

    .el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
        border-top-color: #ffffff;
    }

    .el-tooltip__popper[x-placement^='top'] .popper__arrow {
        border-top-color: #ffffff;
    }

    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #e2e2e2;
    }

    .el-table--border,
    .el-table--group {
        border-color: #e2e2e2;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #e2e2e2;
    }

    .el-table--border th,
    .el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #e2e2e2;
    }

    .el-table--border td,
    .el-table--border th {
        border-right: 1px solid #e2e2e2;
    }

    /* 分页 */
    .pagination_box {
        padding: 2.7vh 0 0 0;
    }

    .el-pagination {
        display: flex;
        justify-content: center;
    }

    .pagination_box .el-pagination button {
        border: 1px solid #D6D6D6;
        border-radius: 5px !important;
        background-color: transparent !important;
    }

    .pagination_box .el-pager li {
        border-radius: 5px !important;
        border: 1px solid #D6D6D6 !important;
        background: transparent !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #5574D7;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #5574D7 !important;
        border: none !important;
        color: #fff;
    }
</style>

</html>